<template>
    <el-dialog append-to-body v-if="dialogVisible" title="新建文件夹" :visible.sync="dialogVisible" width="500px"
        :before-close="handleClose">

        <el-form :model="form" class="demo-form-inline" ref="form" :rules="rules">
            <el-form-item label="文件夹名称" prop="title">
                <el-input v-model="form.title" placeholder="限24个字"></el-input>
            </el-form-item>
            <el-form-item prop="cover_url" label="上传封面图" ref="cover_url">
                <div class="uploadcol">
                    <div class="uploadborder">
                        <img v-if="form.cover_url" :src="form.cover_url" />
                        <img v-else src="@/assets/img/uploadimg.jpg" />
                    </div>
                    <el-button type="primary" @click="isShowPic = true" size="mini"
                        style="margin-top:10px">上传图片</el-button>

                </div>
                <select-img :show="isShowPic" @update="cleanDiaglog" :selectType="imgnum" @selectSure="selectImgs"
                    :source="1" :type="0"></select-img>
            </el-form-item>

        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="handleClose">取 消</el-button>
            <el-button type="primary" @click="handleConfirm">确 定</el-button>
        </span>
    </el-dialog>

</template>
<script>
import { createFolder } from "@/api/kanke/textbook/classcourse";

export default {
    name: "KanKeTextbookClassCourseAddFolder",

    props: {
        dialogVisible: {
            type: Boolean,
            default: false
        },
        type: {
            type: String,
            default: 'book'
        }
    },

    data() {
        return {
            form: {
                cover_url: '',
                title: '',
            },
            isShowPic: false,
            imgnum: 1,
            rules: {
                title: [
                    { required: true, message: '请输入文件夹名称', trigger: 'change' },
                    // 长度最多24个字
                    { min: 1, max: 24, message: '长度在 1 到 24 个字', trigger: 'change' },
                ],
                cover_url: [
                    { required: true, message: '请上传封面图', trigger: 'change' },
                ]
            }

        }
    },
    methods: {
        cleanDiaglog() {
            this.isShowPic = false;
        },
        selectImgs(res) {
            if (res) {
                this.form.cover_url = res[0].urls
                this.isShowPic = false;
                this.$refs.cover_url.onFieldChange()
            }

        },
        handleClose() {
            this.$emit('update:dialogVisible', false);
        },
        handleConfirm() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    const params = {
                        parent_id: this.$route.query.folder_id,
                        class_id: this.$route.query.class_id,
                        folder_type: this.type == 'book' ? 1 : 2,
                        ...this.form
                    }
                    createFolder(params).then(res => {
                        if (res.code == 200) {
                            this.$emit('handleConfirm');
                        }
                    })
                }
            })
        }
    }

}
</script>
<style lang="scss" scoped>
.uploadcol {
    display: flex;
    align-items: center;
    justify-content: space-around;

    .uploadborder {
        img {
            width: 80px;
            height: 80px;
        }

    }
}
</style>